import React, { memo, useCallback, useEffect } from 'react'
import { HomeWrapper } from './style'
import HomeBanner from './c-cpns/home-banner'
import { useDispatch, useSelector } from 'react-redux'
import { fetchHomeDataAction } from '@/store/modules/home'
import HomeSectionV1 from './c-cpns/home-section-v1'
import HomeSectionV2 from './c-cpns/home-section-v2'
import LongForInfo from './c-cpns/home-longfor'
import { isEmpty } from '@/utils/isEmpty'
import HomeSectionV3 from './c-cpns/home-section-v3'
import { changeHeaderConfig } from '@/store/modules/main'


const Home = memo(() => {
  //从redux中获取数据
  const {
    goodPriceInfo,
    higthScoreInfo,
    discountInfo,
    recommendInfo,
    longForInfo,
    plusInfo
  } =useSelector(state=>state.home)

  // 派发异步事件,发起网络请求
  const dispatch= useDispatch()
  useEffect(() => {
    // 获取数据
    dispatch(fetchHomeDataAction())
    dispatch(changeHeaderConfig(false))

  },[dispatch])
  return (
    <HomeWrapper>
      <HomeBanner/>
       <div className='content'>
            {/* 高折扣 */}
            {isEmpty(discountInfo) && < HomeSectionV2 infoData={discountInfo}/>}
            {/* 热门推荐 */}
            {isEmpty(recommendInfo) && < HomeSectionV2 infoData={recommendInfo}/>}
            {/* 猜你想看 */}
            {isEmpty(longForInfo) && < LongForInfo infoData={longForInfo}/>}
            {/* 高性价比 */}
            {isEmpty(goodPriceInfo) &&  <HomeSectionV1 infoData={goodPriceInfo}/>}
            {/* 高评分 */}
            {isEmpty(higthScoreInfo) &&  <HomeSectionV1 infoData={higthScoreInfo}/>}
            {/* plus */}
            {isEmpty(plusInfo) && < HomeSectionV3 infoData={plusInfo}/>}
        </div>

   </HomeWrapper>
  )
})

export default Home
